<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挂号管理</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        #main{
            background-color: #ececf6;
            /*margin-top:20px;  //外边距*/
            /*padding-top:40px;  //内填充*/
            box-sizing:border-box;  //边框 使容器不变大
        }
        #center{
            background-color: #e9ecef;
        }
        .form-group row{
        font-family: 楷体;
        font-weight: bolder;
        font-style: italic;
        }
        .col-6{
            position: absolute;
            top: 280px;
            left: 1200px;
        }
    </style>
</head>
<body>
<div id="main">
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="#">菜单</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="Doctor.html">医生管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="medicine.html">药品管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Register.html">挂号管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link justify-content-end" href="login.html">退出</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="top">
        <form id="form">
           <div class="form-group row">
            <label class="col-form-label col-2 text-center">病历号:</label>
            <div class="col-8">
                <input type="text" name="rid" class="form-control">
            </div>
           </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">姓名:</label>
                <div class="col-8">
                    <input type="text" name="name" class="form-control">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">科室:</label>
                <div class="col-8">
                    <select name="department" class="form-control">
                        <option value="-1">查询所有</option>
                        <option value="1">急诊</option>
                        <option value="2">儿科</option>
                        <option value="3">妇科</option>
                        <option value="4">皮肤科</option>
                        <option value="5">内分泌科</option>
                        <option value="6">牙科</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">状态:</label>
                <div class="col-8">
                    <select name="status" class="form-control">
                        <option value="-1">查询所有</option>
                        <option value="0">已出院</option>
                        <option value="1">挂号</option>
                        <option value="2">已住院</option>
                        <option value="3">已结算</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center"></label>
                <div class="col-8">
                    <button type="button" id="btnSearch" class="btn btn-lg btn-success">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <div id="center">
        <form id="batchform">
         <table class="table table-bordered table-hover table-light">
            <thead>
            <tr>
                <td>
                    <input type="checkbox" onclick='selectAll(this.checked)'>
                </td>
                <td>病历号</td>
                <td>姓名</td>
                <td>费用</td>
                <td>性别</td>
                <td>年龄</td>
                <td>科室</td>
                <td>状态</td>
                <td>挂号日期</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr>
                <td colspan="7" class="text-center">没有数据</td>
            </tr>
            </tbody>
         </table>
        </form>
        <div class="col-6" id="batchdiv">
            <button class="btn btn-danger" id="btnbatch" onclick='batchDelete()'>批量删除</button>
            <a class="btn btn-primary" href="RegisterAdd.html" role="button">添加挂号</a>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">编辑</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editform">
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">病历号:</label>
                        <div class="col-8">
                            <input type="text" id="editrid" name="rid" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">姓名:</label>
                        <div class="col-8">
                            <input type="text" id="editname" name="name" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">费用:</label>
                        <div class="col-8">
                            <input type="text" id="editMoney" name="Money" class="form-control">
                        </div>
                    </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2 text-center">性别:</label>
                            <div class="col-8">
                                <select id="editsex" name="sex" class="form-control">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2 text-center">年龄:</label>
                            <div class="col-8">
                                <input type="text" id="editage" name="age" class="form-control">
                            </div>
                        </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">科室:</label>
                        <div class="col-8">
                            <select id="editdepartment" name="department" class="form-control">
                                <option value="1">急诊</option>
                                <option value="2">儿科</option>
                                <option value="3">妇科</option>
                                <option value="4">皮肤科</option>
                                <option value="5">内分泌科</option>
                                <option value="6">牙科</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">状态:</label>
                        <div class="col-8">
                            <select id="editstatus" name="status" class="form-control">
                                <option value="0">已出院</option>
                                <option value="1">挂号</option>
                                <option value="2">已住院</option>
                                <option value="3">已结算</option>
                            </select>
                        </div>
                    </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2 text-center">注册日期:</label>
                            <div class="col-8">
                                <input type="date" id="editregisterDate" name="registerDate" class="form-control">
                            </div>
                        </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick='doEdit()'>保存</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="delModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delModalLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                您确定要删除【<span id="delname"></span>】吗？
                <form id="delform">
                    <input type="hidden" name="ids" id="delrid">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary " onclick='doDelete()'>确定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="jQuery/jquery-3.6.0.min.js"></script>  <!--  必须先引入jQuery再引入bootstrap-->
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>

<script>
    let depart=['','急诊','儿科','妇科','皮肤科','内分泌科','牙科'];
    let stau=['已出院','挂号','已住院','已结算'];
    function init() {
        let form=jQuery("#form").serialize();
        jQuery.post("register/search",form,function (rst) {
        let trs='';

        for(let i=0;i<rst.length;i++)
        {
            let u=rst[i];
            trs+=`
                        <tr>
                            <td>
                                <input type="checkbox" name="ids" value="${u.rid}">
                            </td>
                             <td>${u.rid}</td>
                            <td>${u.name}</td>
                            <td>${u.Money}</td>
                            <td>${u.sex==1?'男':'女'}</td>
                            <td>${u.age}</td>
                            <td>${depart[u.department]}</td>
                            <td>${stau[u.status]}</td>
                            <td>${u.registerDate}</td>
                            <td>
                                <a href="#" onclick='showDeleteDialog(${JSON.stringify(u)})'>删除</a>
                                <a href="#" onclick='showEditDialog(${JSON.stringify(u)})'>编辑</a>
                            </td>
                        </tr>
                            `;
        }
        if(trs.length==0)
        {
            trs=`
                         <tr>
                            <td colspan="7" class="text-center">没有数据</td>
                        </tr>
                            `;
        }
        //把数据添加到tbody中
        jQuery("#tbody").html(trs);

    })
    }
    function showEditDialog(register)
    {
        // alert(user);
        jQuery("#editrid").val(register.rid);
        jQuery("#editname").val(register.name);
        jQuery("#editMoney").val(register.Money);
        jQuery("#editsex").val(register.sex);
        jQuery("#editage").val(register.age);
        jQuery("#editdepartment").val(register.department);
        jQuery("#editstatus").val(register.status);
        jQuery("#editModal").modal("show");
    }
    function doEdit() {
        let form = jQuery("#editform").serialize();
        jQuery.post("register/edit", form, function (rst) {
            if (rst > 0) {
                jQuery("#editModal").modal("hide");
                alert("修改成功！");
                init();
            } else {
                alert("修改失败！");
            }
        })
    }
</script>
<script>
    jQuery(function () {
        jQuery("#btnSearch").click(function () {
            init();
        });
    })
</script>
<!--删除-->
<script>
    function showDeleteDialog(user) {
        //非表单控件没有val
        console.log(user);
        jQuery("#delname").html(user.name);
        jQuery("#delrid").val(user.rid);
        jQuery("#delModal").modal("show");
    }
    function doDelete() {
        let form=jQuery("#delform").serialize();
        jQuery.post("register/delete",form,function (rst) {
            if(rst>0)
            {
                alert("删除成功！");
                init();
            }
            else{
                alert("删除失败！");
            }
            jQuery("#delModal").modal('hide');
        })
    }
</script>
<script>
    function selectAll() {
        jQuery("Input[name='ids']").prop("checked",f);
    }
    function batchDelete() {
        let form=jQuery("#batchform").serialize();
        jQuery.post("register/delete",form,function (rst) {
            if(rst>0)
            {
                alert("删除成功！");
                init();
            }
            else{
                alert("删除失败！");
            }

        })
    }
</script>
</html>